<template>
	<div class="system-user-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="1000px">
			<el-form ref="dialogFormRef" :model="state" :rules="state.rules" size="default" label-width="150px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="所属主系统" prop="ruleForm.mainSysId">
							<el-select
								v-model="state.ruleForm.mainSysId"
								filterable
								remote
								reserve-keyword
								placeholder="可输入主系统关键字查找"
								:remote-method="getMainSysList"
								:loading="loading"
								class="w100"
								clearable
							>
								<el-option
								v-for="item in mainSysOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="系统名称" prop="ruleForm.name">
							<el-input v-model="state.ruleForm.name" placeholder="请输入系统名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="系统英文名称" prop="ruleForm.engName">
							<el-input v-model="state.ruleForm.engName" placeholder="请输入系统英文名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="系统consumerId" prop="ruleForm.consumerId">
							<el-input v-model="state.ruleForm.consumerId" placeholder="请输入系统consumerId" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="所在网络域" prop="ruleForm.networkDomain">
							<el-input v-model="state.ruleForm.networkDomain" placeholder="请输入所在网络域" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="消费方接入模式" prop="ruleForm.engName">
							<el-input v-model="state.ruleForm.consumerCommMethod" placeholder="请输入消费方接入模式" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="服务方接入模式" prop="ruleForm.engName">
							<el-input v-model="state.ruleForm.providerCommMethod" placeholder="请输入服务方接入模式" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="身份认证算法" prop="ruleForm.authAlgo">
							<el-input v-model="state.ruleForm.authAlgo" placeholder="请输入身份认证算法" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="系统状态"  prop="ruleForm.status">
							<el-radio-group v-model="state.ruleForm.status">
								<el-radio label="0">下线</el-radio>
								<el-radio label="1">上线</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="文档名称" prop="ruleForm.engName">
							<el-input v-model="state.ruleForm.documentName" placeholder="文档名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="备注" prop="ruleForm.remarks">
							<el-input v-model="state.ruleForm.remarks" placeholder="请输入备注" clearable></el-input>
						</el-form-item>
					</el-col>
					
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(dialogFormRef)" size="default">{{ state.dialog.submitTxt
					}}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus'
import { systemInfoApi } from './api';
import { ElMessage } from 'element-plus';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 引入 api 请求接口
const api = systemInfoApi();
// 定义变量内容
const dialogFormRef = ref();
const state = reactive({
	ruleForm: {
		id: '',//主键id
		mainSysId:'',//所属主系统id
		mainSysName:'',//所属主系统名称
		name: '', // 系统名称
		engName:'',//系统英文名称
		consumerId:'',//系统consumerId
		networkDomain:'',//所在网络域
		consumerCommMethod:'',//消费方接入模式
		providerCommMethod:'',//服务方接入模式
		authAlgo:'',//身份认证算法
		documentName:'',//文档名称
		status:'',//系统状态
		remarks:''//备注
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	rules: {
		'ruleForm.mainSysId': { required: true, message: '请输入所属主系统', trigger: 'blur' },
		'ruleForm.name': { required: true, message: '请输入系统名称', trigger: 'blur' },
		'ruleForm.engName': { required: true, message: '请输入系统英文名称', trigger: 'blur' },
		'ruleForm.consumerId': { required: true, message: '请输入系统consumerId', trigger: 'blur' },
		'ruleForm.networkDomain': { required: true, message: '请输入所在网络域', trigger: 'blur' },
		'ruleForm.consumerCommMethod': { required: true, message: '请输入消费方接入模式', trigger: 'blur' },
		'ruleForm.providerCommMethod': { required: true, message: '请输入服务方接入模式', trigger: 'blur' },
		'ruleForm.authAlgo': { required: true, message: '请输入身份认证算法', trigger: 'blur' },
		'ruleForm.documentName': { required: true, message: '请输入文档名称', trigger: 'blur' },
		'ruleForm.status': { required: true, message: '请选择系统状态', trigger: 'blur' },
	},
});

interface ListItem {
  value: string
  label: string
}

const mainSysOptions = ref<ListItem[]>([])
const loading = ref(false)

//关键字查询需求信息
const getMainSysList = (query: string) => {
  if (query) {
    loading.value = true
	//通过id集合字符串去后台查询名称
	api.getMainSysList({"keywords":query}).then(
		function (res) {
			loading.value = false
			const data = res.data;
			mainSysOptions.value = data.map((item: any) => {
				return { value: `${item.id}`, label: `${item.name}` }
			})
		}
	)
  } else {
    mainSysOptions.value = []
  }
}



// 打开弹窗
const openDialog = (type: string, row: any) => {
	if (type === 'edit') {
		state.ruleForm = row;
		state.dialog.title = '修改系统信息';
		state.dialog.submitTxt = '修 改';
		mainSysOptions.value = [{value:state.ruleForm.mainSysId,label:state.ruleForm.mainSysName}]
	} else {
		//新增时 主键id置为空
		state.ruleForm.id = '';
		state.ruleForm.status = '1';//新增时，状态默认为在线
		state.dialog.title = '新增系统信息';
		state.dialog.submitTxt = '新 增';
	}
	state.dialog.isShowDialog = true;

};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			// console.log('校验通过！')
			api.save(state.ruleForm).then(
				(res) => {
					if (res.data.code === "000000") {
						ElMessage.success(res.data.message);
						closeDialog(); // 关闭弹窗
						emit('refresh');
					} else {
						ElMessage.warning(res.data.message);
					}
				}
			)
		} else {
			// console.log('校验未通过！')
			return false
		}
	})
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
